<template>
  <el-dialog
    v-if="open"
    class="dia-style"
    :title="title"
    :visible.sync="open"
    width="60%"
    :close-on-click-modal="false"
    @close="cancel"
  >
    <GenerateForm
      v-if="isShow"
      ref="generateForm"
      :data="jsonData"
      :value="editData"
      :remote="remoteFuncs"
    />
    <el-upload
      v-if="isfileUpload==true"
      class="upload-demo"
      action=""
      :limit="1"
      :on-preview="handlePreview"
      :before-upload="handleBeforeUpload"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="cancel">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { findById } from '@/api/bpmn/formDesign.js'
import { get, post } from '@/utils/request'
import { setJsonLists, isfileUpload } from '@/views/basicConfig/serviceConfig/utils/setArr.js'
import GenerateForm from '@/components/GenerateForm'

const BASE_URL = window.baseUrl.ticket
export default {
  components: { GenerateForm },
  props: {
    title: {
      type: String,
      default: '预览'
    }
  },
  data() {
    return {
      open: false,
      jsonData: {},
      editData: {},
      isShow: false,
      remoteObjs: [],
      remoteFuncs: {},
      isfileUpload: false,
      fileList: []
    }
  },
  methods: {
    show(id) {
      this.remoteObjs = []
      findById(id).then(async(res) => {
        this.jsonData = JSON.parse(res.formTemplate)
        this.isShow = true
        const newArr = await setJsonLists(this.jsonData.list)
        //  判断是否有上传附件
        this.isfileUpload = await isfileUpload(newArr)
        newArr.forEach(i => {
          if (i.type == 'cascader' || i.type == 'radio' || i.type == 'select' || i.type == 'checkbox') {
            this.remoteObjs.push({ remoteFunc: i.options.remoteFunc, props: i.options.props })
          }
        })
        const _self = this
        this.remoteObjs.forEach(i => {
          /**
           * remoteFunc
           * 支持配置函数的方式使用（未测试）
           * 支持配置全路径或者相对路径
           *  get,直接配置地址
           *  post,支持配置路径和参数，参考如下配置
           *    post('/xxxx/xxxx',{abc:123})
           * @param resolve
           */
          this.remoteFuncs[i.remoteFunc] = function(resolve) {
            const reg = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/g
            const reg2 = /^\//g
            if (/^post\(.*\)$/.test(i.remoteFunc)) {
              const match = /^post\('(.*)'(?:,'\{.*\}')?\)$/.exec(i.remoteFunc)
              if (match) {
                const url = match[1]
                const param = match.length > 1 ? match[2] : {}
                post(url, param).then(res => {
                  resolve(res)
                })
              }
            } else if (reg.test(i.remoteFunc)) {
              get(i.remoteFunc).then(res => {
                resolve(res)
              })
            } else if (reg2.test(i.remoteFunc)) {
              get(BASE_URL + i.remoteFunc).then(res => {
                resolve(res)
              })
            } else {
              _self.$message.error('请配置正确的远端方法')
            }
          }
        })
        this.open = true
      })
    },
    cancel() {
      this.open = false
      this.isShow = false
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file, fileList) {
      console.log(file, fileList)
    },
    handleBeforeUpload(file, fileList) {
      console.log(file, fileList)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form--label-right .el-form-item {
  margin-bottom: 20px !important;
}
</style>
